<template>
    <div class="face">
        <div class="box">
            <p class="section">亲！请不要输入逗号等非法字符集哟</p>

            <div class="input">
                <input type="text" placeholder="请输入内容" class="ipt" v-model="string" autofocus="autofocus"
                @keyup.enter="handleClickInsert">
                <div class="button" @click="handleClickInsert">确定</div>
            </div>
            <!-- <div class="list one">
                <div class="wrapper" v-for="(item, index) of list" :key="index">
                    <span class="iconfont delete" @click="handleDeleteClick(index)">&#xe668;</span>
                    <div class="item">{{item}}</div>
                </div>
            </div> -->
            <p class="section down">以下为默认选中词头,您的每次
                <span class="important">提交</span>都会
                <span class="important">自动结束上一轮投票，并且把最后一次的候选人覆盖,</span>
                点击
                <span class="important">取消</span>
                会显示<span class="important">最后一次的候选人</span>
            </p>
            <div class="list">
                <div class="wrapper" v-for="(item, index) of list" :key="index">
                    <span class="iconfont delete" @click="handleDeleteClick(index)">&#xe668;</span>
                    <div class="item">{{item}}</div>
                </div>
            </div>
            <!-- 插入文件 -->
             <p class="section">以下为自定义插入附件的字段</p>
             <!-- <input type="text" placeholder="请输入文件的默认路径" class="ipt" v-model="string2"> -->
            <div class="input">
                <input type="text" placeholder="请输入文件名" class="ipt" v-model="string2"
                @keyup.enter="handleClickInsert2">
                <div class="button" @click="handleClickInsert2">确定</div>
            </div>
             <div class="list file">
                <div class="wrapper" v-for="(item, index) of list2" :key="index">
                    <span class="iconfont delete" @click="handleDeleteClick(index)">&#xe668;</span>
                    <div class="item file-item">{{item}}</div>
                </div>
            </div>
            <div>
                 <div class="button" @click="handleSubmitClick">提交</div>
                 <div class="button" @click="handleCancleClick">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'Vuex'
import axios from 'axios'
export default {
  name: 'CandidateCover',
  data () {
    return {
      // list: [],
      list: ['姓名', '性别', '年龄', '项目', '职称', '单位', '履历'],
      list2: [],
      string: '',
      string2: ''
    }
  },
  computed: {
    ...mapState(['userId']),
    ...mapState(['userPassword'])
  },
  methods: {
    handleClickInsert () {
      // console.log(JSON.parse(JSON.stringify(this.list))) //json.parse将json格式的数据转化成js格式
      if (this.string === '') {
      } else if (this.string.indexOf(',') < 0 && this.string.indexOf('，') < 0) {
        this.list.push(this.string)
        this.string = ''
      }
    },
    handleClickInsert2 () {
      // console.log(JSON.parse(JSON.stringify(this.list))) //json.parse将json格式的数据转化成js格式
      if (this.string2 === '') {
      } else if (this.string2.indexOf(',') < 0 && this.string2.indexOf('，') < 0) {
        this.list2.push(this.string2)
        this.string2 = ''
      }
    },
    handleDeleteClick (index) {
      this.list.splice(index, 1)
    },
    handleDeleteClick2 (index) {
      this.list2.splice(index, 1)
    },
    handleSubmitClick () {
      // console.log(JSON.stringify(this.list))
      axios.post('http://192.168.43.188:8081/setFields', {
        'id': this.userId,
        'fields': JSON.stringify(this.list),
        'files': JSON.stringify(this.list2)
      }).then(({status, data}) => {
        if (status === 200) {
          if (data.msg === '111') {
            // this.handleEndVote()
            this.handleSaveVote()
            swal('设置成功', '', 'success')
            this.$emit('afterSet', this.list, this.list2)
          } else {
            swal('Info' + data.msg, '', 'error')
          }
        } else {
          swal('服务器错误', '', 'error')
        }
      })
    },
    handleCancleClick () {
      this.$emit('cancle')
    },
    handleEndVote () {
      axios.post('http://192.168.43.188:8081/endVote', {
        'mid': this.userId,
        'pwd': this.userPassword
      }).then(({data}) => {
        // console.log(data)
        // swal(data, {icon: "success"})
        if (data.msg === '111') {
          // swal("本次投票结束", '', "success")
        } else {
          swal(data.msg, '', 'error')
        }
      }).catch(error => swal(error, '', 'error'))
      // } else {
      //   swal('您取消了结束本次投票，本次投票依旧继续')
      // }
      //   })
    },
    handleSaveVote () {
      // console.log("获取中")
      axios.post('http://192.168.43.188:8081/excelCandidatesTemplate', {
        'mid': this.userId
      }).then(({data, status}) => {
        if (status === 200) {
          console.log()
          this.handlePrintUser(data.url)
        } else {
          swal(data.msg, '', 'wraning')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    handlePrintUser (url) {
      console.log(url)
      const name = url.split('//')
      const fileName = name[name.length - 1]
      // for (let i = 0; i < 2; i++) {
      axios({
        method: 'post',
        url: 'http://192.168.43.188:8081/download',
        responseType: 'blob',
        dataType: 'jsonp',
        data: {'url': url}
      }).then(({data}) => {
        console.log('请求已发送')
        swal('请等待片刻', '', 'info')
        this.download(data, fileName)
        swal('download success', '', 'success')
      })
      // }
    },
    download (data, fileName) {
      if (!data) {
        swal('没有数据', '', 'info')
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      // link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName + '.xls')
      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.face
    z-index: 2
    background: rgba(0, 0, 0, .3)
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    .box
        margin: auto
        margin-top: 10%
        width: 50%
        min-height: 15%
        overflow: hidden
        padding: .2rem  .1rem
        background: #eee
        border-radius: .2rem
        .section
            color: red
            line-height: .6rem
            font-size: .3rem
        .list
            padding-bottom: 30%
            // overflow: hidden
            .wrapper
                width: 25%
                float: left
                position: relative
                .delete
                    position: absolute
                    right: .13rem
                    top: .13rem
                    font-size: .25rem
                    color: #fff
                    // background: #fff
                .item
                    background: $pink
                    margin: .1rem
                    border: .02rem solid #fff
                    border-radius: .1rem
                    color: #eee
                    line-height: .6rem
                    font-size: .32rem
                    padding: 0 .2rem
                    text-align: center
        .important
            color: red
        .down
            color: #777
            margin-top: .3rem
            line-height: .4rem
        .one
            margin-top: .2rem
            background: #aaa
        .button
            // clear: both
            // display: inline
            background: $blue
            float: right
            line-height: .8rem
            padding: 0 .3rem
            border: .02rem $bgcolor solid
            border-radius: .1rem
            font-size: .38rem
            color: #666
            text-align: center
            margin: .1rem
            margin-top: 1rem
        .input
            display: flex
            .ipt
                flex: 1
                color: #666
                font-size: .38rem
                padding: 0 .1rem
            .button
                background: $bgcolor
                color: #fff
                margin: 0 .1rem
        .file
          padding-bottom: 0
.file-item
  background: #000
</style>
